<template>
  <div>
    <div class="check">
      <div class="paytime">
        <div class="paytime-left">
          <div>
            <p>
              <i
                class="el-icon-alarm-clock"
                style="color: blue; font-size: 28px; margin-right: 15px"
              ></i>
            </p>
            <p>剩余支付时间0时8分34秒</p>
          </div>
          <p class="cxdd">若逾期不保留作为，请重新订购</p>
        </div>
        <div class="dingdan">
          <div class="dingdanbh">
            <span class="ddbh">订单编号：<span>56565656565656</span></span>
            <span>订单详情</span>
          </div>
          <div class="call">支付成功之后，如果没有收到短信，请拨打95995</div>
        </div>
      </div>
      <div class="selectpay">
        <p>支付方式选择</p>
        <p>支付遇到问题您可点击" <span>支付帮助</span> "</p>
      </div>
      <div class="payway">
        <p>常用支付方式</p>
        <div class="pasy">
          <img src="../assets/air_images/zfb.png" alt=""/>
        </div>
      </div>
      <el-button
        @click="nextstep"
        type="success"
        size="medium"
        style="margin-bottom: 20px; float: right"
        class="btn"
      >确认支付
      </el-button
      >
      <div style="clear: both"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['tempdate3'],
    data() {
      return {
        ruleForm: {
          name: "",
          region: "",
        },
        rules: {
          name: [
            {required: true, message: "请输入活动名称", trigger: "blur"},
            {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"},
          ],
          region: [
            {required: true, message: "请选择活动区域", trigger: "change"},
          ],
        }
      };
    },
    methods: {
      nextstep() {
        this.$http.get("http://localhost:1234/pay?flightId=" + this.tempdate3.flightId).then(res => {
          console.log(res.data)
           document.write(res.data);
        })

      },
      prevstep() {
        this.$emit("prevstep");
      },
      changedate() {
        this.$emit("changedate", {step: 4, data: 1323});
      },
      findTicketing() {

      }
    },

    created() {
      console.log(this.tempdate3.flightId);
    },

  };
</script>

<style scoped>
  .check {
    width: 1022px;
  }

  .paytime {
    display: flex;
  }

  .paytime-left {
    padding: 10px;
    width: 180px;
    background: #eee;
  }

  .paytime-left div {
    display: flex;
    justify-content: space-between;
    width: 145px;
    align-items: center;
  }

  .cxdd {
    border: 1px skyblue solid;
    width: 1450x;
    padding: 5px;
    border-radius: 3px;
    color: blue;
  }

  .dingdan {
    width: calc(100% - 180px);
  }

  .dingdanbh {
    border-bottom: 1px #eee solid;
    padding: 15px 20px;
    color: #59a5f0;
  }

  .dingdanbh .ddbh {
    display: inline-block;
    background: #eff7ff;
    border: 1px #59a5f0 solid;
    border-radius: 32px;
    padding: 8px 13px;
    margin-right: 12px;
  }

  .call {
    padding: 15px 20px;
  }

  .selectpay {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;
  }

  .payway {
    background: #fbfbfb;
    padding: 10px 10px 10px 15px;
    margin-bottom: 20px;
  }

  .pasy {
    width: 208px;
    height: 70px;
    padding: 2px;
    border: 1px transparent solid;

  }

  .pasy img {
    width: 100%;
    height: 100%;
  }

  .pasy:hover {
    border: 1px #666 solid;
    cursor: pointer;
  }
</style>
